<template>
	<view class="body">
		<view class="formCss">
			<uni-forms ref="baseForm" labelWidth="200" :modelValue="uers" label-position="top">
				<uni-forms-item label="用户编号" required leftIcon="staff">
					<uni-easyinput v-model="uers.uersId" placeholder="请输入用户编号" />
				</uni-forms-item>
				<uni-forms-item label="用户姓名" required leftIcon="staff">
					<uni-easyinput v-model="uers.uersname" placeholder="请输入用户姓名" />
				</uni-forms-item>
				<uni-forms-item label="性别" prop="textarea">
					<radio-group @change="radioChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in uers.sexs" :key="item.value">
							<view>
								<radio :value="item.value" :checked="index === current" />
								{{item.text}}
							</view>

						</label>
					</radio-group>
				</uni-forms-item>
				<uni-forms-item label="身份证号码" required leftIcon="identity">
					<uni-easyinput v-model="uers.identity" placeholder="请输入身份证号码" />
				</uni-forms-item>
				<uni-forms-item label="手机号" required leftIcon="phone">
					<uni-easyinput v-model="uers.phone" placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item label="邮箱" leftIcon="email">
					<uni-easyinput v-model="uers.email" placeholder="请输入邮箱" />
				</uni-forms-item>
				<uni-forms-item label="家庭住址" leftIcon="address">
					<uni-easyinput v-model="uers.address" placeholder="请输入家庭住址" />
				</uni-forms-item>
				<uni-forms-item label="职位" leftIcon="circle">
					<picker @change="sizePicker" :value="uers.sizeIndex" :range="uers.passwodr">
						<view class="textureCss">{{uers.passwodr[uers.sizeIndex]}}</view>
					</picker>
				</uni-forms-item>
				<uni-forms-item label="图片" required leftIcon="camera">
					<button @click="select" type="default">上传</button><br>
					<view class="customImgCss">
						<image class="customImgSubCss" mode="widthFix" :src="path" />
						<image style="z-index: 1; position: absolute;left: 155px; top: 263px; width: 8%; height: 8%;"
							:src="uers.imger" v-model="uers.imger"></image>
						<ksp-cropper mode="free" :width="200" :height="200" :maxWidth="1024" :maxHeight="1024"
							:url="url" @cancel="oncancel" @ok="onok"></ksp-cropper>
					</view>
				</uni-forms-item>
				<uni-forms-item label="密码" required leftIcon="passswod">
					<uni-easyinput v-model="uers.passwodr" placeholder="请设置密码" />
				</uni-forms-item>
				<!-- <uni-forms-item label="入职时间" leftIcon="circle">
		  <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					 <view class="textureCss">{{uers.sizes[uers.sizeIndex]}}</view>
					</picker>
		</uni-forms-item> -->
				<uni-forms-item label="状态" prop="textarea">
					<radio-group @change="radioChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in uers.staic" :key="item.value">
							<view>
								<radio :value="item.value" :checked="index === current" />
								{{item.text}}
							</view>

						</label>
					</radio-group>
				</uni-forms-item>

			</uni-forms>
			<button type="primary" @click="addprodce">提交</button>
		</view>
	</view>
</template>
<script>
	export default {
		onLoad: function() {

		},
		data() {
			return {
				uers: {
					uersId: '',
					uersname: '',
					sexs: [{
						text: "男",
						value: 1
					}, {
						text: "女",
						value: 2
					}],
					age: 0,
					identity: '',
					phone: '',
					email: '',
					address: '',
					position: '',
					imger: '',
					passwodr: '',
					time: '',
					staic: [{
						text:"工作",
						value:1
					},
					{
					text:"休假",
					value:2
				}],
				
				},
			current:0,
				url:"",
				path:""
			}
		},
		
		methods: {
			onload:function(options){
				console.log(JSON.parse(options.item))
				var item= JSON.parse(options.item);
				console.log(item)
				console.log(item.vodPlayUrl)
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			texturePicker(e) {
				this.uers.textureIndex = e.detail.value
			},
			sizePicker(e) {
				this.uers.sizeIndex = e.detail.value
			},
			select() {
				uni.chooseImage({
					count: 1,
					success: (rst) => {
						// 设置url的值，显示控件
						this.url = rst.tempFilePaths[0];
					}
				});
			},
			onok(ev) {
				this.url = "";
				this.path = ev.path;
			},
			oncancel() {
				// url设置为空，隐藏控件
				this.url = "";
			},
			addprodce() {
				uni.navigateTo({
					url: "/pages/finish/finish",

				})
			}
		}
	}
</script>

<style>
	.customImgSubCss {
		margin-left: 5px;
		margin-top: 5px;
		width: 330px;
		height: 330px;
		border-radius: 50%;
	}

	.customImgCss {
		width: 340px;
		height: 340px;
		/* border: 2px #000000 solid; */
		border-radius: 50%;
		background-image: url(../../static/yz-image/yz.jpeg);
		background-size: 360px 360px;
		background-position: -10px -10px;
		z-index: 0;
	}

	.body {
		width: 100%;
		height: 100%;
	}

	.formCss {
		padding: 20px;
	}

	.textureCss {
		width: auto;
		height: 40px;
		border: 1px solid #e5e5e5;
		border-radius: 4px;
		text-align: center;
		line-height: 40px;
	}
</style>
